<template>
	<view>
		<view v-for="(item,value) in PartDetails" :key="value">
			<!-- 头部样式 -->
			<view class="Partdetail1">
				<text class="Partdetail2">{{ item.title }}</text>
				<text class="Partdetail3">{{ item.Remuneration }}</text>
				<text class="Partdetail4">{{ item.peoplenum }}人</text>
			</view>

			<!-- 基本工作时间 -->
			<view>
				<view class="Partdetail5">
					<image class="Partdetail12"
						src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E5%8A%A8%E6%80%81%E5%8C%BA%E5%9D%97%E5%85%BC%E8%81%8C%E4%BF%A1%E6%81%AF-Pt_information/%E5%B7%A5%E4%BD%9C%E5%9C%B0%E7%82%B9.png"
						mode=""></image>
					<text class="Partdetail6">地点:</text>
					<text class="Partdetail7">{{ item.place }}</text>
					<image class="Partdetail13"
						src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E5%8A%A8%E6%80%81%E5%8C%BA%E5%9D%97%E5%85%BC%E8%81%8C%E4%BF%A1%E6%81%AF-Pt_information/%E5%B7%A5%E4%BD%9C%E6%97%A5%E6%9C%9F.png"
						mode=""></image>
					<text class="Partdetail8">日期:</text>
					<text class="Partdetail9">{{ item.Datet }}</text>
					<image class="Partdetail14"
						src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E5%8A%A8%E6%80%81%E5%8C%BA%E5%9D%97%E5%85%BC%E8%81%8C%E4%BF%A1%E6%81%AF-Pt_information/%E6%97%B6%E6%AE%B5.png"
						mode=""></image>
					<text class="Partdetail10">时段:</text>
					<text class="Partdetail11">{{ item.timeD }}</text>
				</view>
			</view>
			<!-- 岗位详情 -->
			<view>
				<view class="Partdetail15">
					<text class="Partdetail16">岗位详情:</text>
					<text class="Partdetail17">【工作内容】</text>
					<text id="ade" class="Partdetail18">{{ item.job_content }}</text>
					<text class="Partdetail19">【工作要求】</text>
					<text class="Partdetail20">{{ item.Job_requirements }}</text>
				</view>
			</view>
			<!-- 信息联系方式 -->
			<view>
				<view class="Partdetail21">
					<text class="Partdetail22">发布者:</text>
					<view class="Partdetail23">
						<text class="Parttime26">食堂</text>
					</view>
					<text class="Partdetail24">至诚学院四堂经理</text>
					<text class="Partdetail25">联系方式:13712345678</text>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="tabbar-container">
			<block>
				<view class="tabbar-item">
					<button class="uniBt_but1" @click="onIphoneint()">电话联系</button>
					<button class="uniBt_but2" @click="onBmTon()">立即报名</button>
				</view>
			</block>
		</view>
		<view style="padding-bottom: 120rpx;">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				PartDetails: []
			};
		},
		onLoad() {
			this.Loadsj()
		},
		methods: {
			Loadsj() {
				const that = this
				uni.getStorage({
					key: 'Part',
					success: function(res) {
						console.log(res)
						that.PartDetails.push(res.data)
					}
				})
			},
			onIphoneint() {
				var iphone = this.PartDetails[0].phone
				console.log(iphone)
				const res = uni.getSystemInfoSync();
				// ios系统默认有个模态框
				if (res.platform == 'ios') {
					uni.makePhoneCall({
						phoneNumber: iphone,

						success() {
							console.log('拨打成功了');
						},
						fail() {
							console.log('拨打失败了');
						}
					})
				} else {
					//安卓手机手动设置一个showActionSheet
					uni.showActionSheet({
						itemList: [iphone, '呼叫'],
						success: function(res) {
							console.log(res);
							if (res.tapIndex == 1) {
								uni.makePhoneCall({
									phoneNumber: iphone,
								})
							}
						}
					})
				}

			},
			onBmTon() {
				uni.navigateTo({
					url: './Registration_filling'
				});
				// uni.showModal({
				// 	title: '报名提示',
				// 	content: '是否立即报名？',
				// 	success: function (res) {
				// 		if (res.confirm) {
				// 			console.log('用户点击确定');
				// 			uni.$showMsg('报名成功')
				// 			setTimeout(function() {
				// 				uni.navigateTo({
				// 					url: '../part_time'
				// 				});
				// 			}, 1000);
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 		}
				// 	}
				// });


			}
		},
		mounted() {
			let that = this
			let info = uni.createSelectorQuery().select("#ade");
			info.boundingClientRect(function(data) { //data - 各种参数
				console.log(data) // 获取元素的相关信息
			}).exec()

		}
	}
</script>

<style lang="scss">
	.Partdetail1 {
		position: relative;
		background-color: #ffffff;
		margin: 10px 10px 10px 5px;
		border-radius: 15px;
		height: 200rpx;
		box-shadow: 5px 10px 10px #51d3d3;
		font-family: fantasy;
	}

	.Partdetail2 {
		position: absolute;
		font-size: 50rpx;
		top: 20rpx;
		left: 40rpx;
	}

	.Partdetail3 {
		position: absolute;
		font-size: 40rpx;
		color: #D9001B;
		top: 120rpx;
		left: 40rpx;
	}

	.Partdetail4 {
		position: absolute;
		font-size: 40rpx;
		color: #51d3d3;
		top: 120rpx;
		left: 580rpx
	}

	.Partdetail5 {
		position: relative;
		background-color: #ffffff;
		margin: 10px 10px 10px 5px;
		border-radius: 15px;
		height: 400rpx;
		box-shadow: 5px 10px 10px #51d3d3;
		font-family: fantasy;
	}

	.Partdetail6 {
		position: absolute;
		top: 40rpx;
		left: 140rpx;
		font-weight: 700;
	}

	.Partdetail7 {
		position: absolute;
		top: 90rpx;
		left: 140rpx;
		font-weight: 700;
	}

	.Partdetail8 {
		position: absolute;
		top: 150rpx;
		left: 140rpx;
		font-weight: 700;
	}

	.Partdetail9 {
		position: absolute;
		top: 100px;
		left: 70px;
		font-weight: 700;
	}

	.Partdetail10 {
		position: absolute;
		top: 260rpx;
		left: 140rpx;
		font-weight: 700;
	}

	.Partdetail11 {
		position: absolute;
		top: 310rpx;
		left: 140rpx;
	}

	.Partdetail12 {
		position: absolute;
		width: 80rpx;
		height: 80rpx;
		top: 40rpx;
		left: 40rpx;
	}

	.Partdetail13 {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		top: 144rpx;
		left: 30rpx;
	}

	.Partdetail14 {
		position: absolute;
		width: 80rpx;
		height: 80rpx;
		top: 260rpx;
		left: 40rpx;
	}

	.Partdetail15 {
		position: relative;
		background-color: #ffffff;
		margin: 10px 10px 10px 5px;
		border-radius: 15px;
		height: 720rpx;
		box-shadow: 5px 10px 10px #51d3d3;
		font-family: fantasy;
	}

	.Partdetail16 {
		position: absolute;
		top: 20rpx;
		left: 30rpx;
		font-size: 25px;
	}

	.Partdetail17 {
		position: absolute;
		top: 100rpx;
		left: 40rpx;
		font-size: 36rpx;
	}

	.Partdetail18 {
		position: absolute;
		top: 160rpx;
		left: 80rpx;
		font-size: 28rpx;
		width: 560rpx;
	}

	.Partdetail19 {
		position: absolute;
		top: 380rpx;
		left: 40rpx;
		font-size: 36rpx;
	}

	.Partdetail20 {
		position: absolute;
		top: 440rpx;
		left: 80rpx;
		width: 560rpx;
		font-size: 28rpx;
	}

	//底部样式
	.tabbar-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		box-shadow: 0 0 5px #999;
		display: flex;
		align-items: center;
		padding: 5rpx 0;
		color: #999999;
		background-color: #FFFFFF;
	}

	.tabbar-container .tabbar-item {
		width: 33.33%;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.tabbar-container .item-active {
		color: #f00;
	}

	.tabbar-container .center-item {
		display: block;
		position: relative;
	}

	.tabbar-container .tabbar-item .item-top {
		width: 70rpx;
		height: 70rpx;
		padding: 10rpx;
	}

	.tabbar-container .center-item .item-top {
		flex-shrink: 0;
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: -50rpx;
		left: calc(50% - 50rpx);
		border-radius: 50%;
		box-shadow: 0 0 5px #999;
		background-color: #ffffff;
	}

	.tabbar-container .tabbar-item .item-top image {
		width: 100%;
		height: 100%;
	}

	.tabbar-container .tabbar-item .item-bottom {
		font-size: 28rpx;
		width: 100%;
	}

	.tabbar-container .center-item .item-bottom {
		position: absolute;
		bottom: 5rpx;
		padding-bottom: 8px;
	}

	//按钮r
	.uniBt_but1 {
		border-width: 0px;
		position: absolute;
		left: 35rpx;
		top: 15rpx;
		width: 330rpx;
		height: 70rpx;
		background: inherit;
		background-color: rgba(217, 0, 27, 0.682352941176471);
		border: none;
		border-radius: 14px;
		color: #FFFFFF;
		font-size: 13px;
		box-shadow: 5px 10px 10px rgba(217, 0, 27, 0.682352941176471);
		;
	}

	.uniBt_but2 {
		border-width: 0px;
		position: absolute;
		left: 385rpx;
		top: 15rpx;
		width: 330rpx;
		height: 70rpx;
		background: inherit;
		background-color: rgba(81, 211, 211, 1);
		border: none;
		border-radius: 14px;
		color: #FFFFFF;
		font-size: 13px;
		box-shadow: 5px 10px 10px #51d3d3;
	}

	.Partdetail21 {
		position: relative;
		background-color: #ffffff;
		margin: 10px 10px 10px 5px;
		border-radius: 15px;
		height: 130px;
		box-shadow: 5px 10px 10px #51d3d3;
		font-family: fantasy;
	}

	.Partdetail22 {
		position: absolute;
		font-size: 20px;
		top: 10px;
		left: 30px;
	}

	.Partdetail23 {
		position: absolute;
		width: 120rpx;
		height: 120rpx;
		border-radius: 200rpx;
		background-color: #EC808D;
		top: 90rpx;
		left: 40rpx;
	}

	.Parttime26 {
		position: absolute;
		top: 34rpx;
		left: 28rpx;
		color: #ffffff;
	}

	.Partdetail24 {
		position: absolute;
		top: 100rpx;
		left: 180rpx;
	}

	.Partdetail25 {
		position: absolute;
		top: 160rpx;
		left: 192rpx;
	}
</style>
